<template>
    <rx-dialog @handOk="onOk" @cancel="cancel">
        <div class="SysDicColorConfig">
            <div class="rx-top-name">{{i18n('style','风格样式')}}</div>
            <a-radio-group v-model="colorConfig.type">
                <a-radio value="presets">
                    {{i18n("presets","系统预设")}}
                </a-radio>
                <a-radio value="custom">
                    {{i18n("custom","自定义")}}
                </a-radio>
            </a-radio-group>
            <div class="rx-center">
                <ul v-if="colorConfig.type=='presets'" class="rx-center-ul">
                    <li v-for="obj in colorList" @click="colorEvent(obj)"  class="rx-center-li" :class="[colorConfig.bgcolor==obj.backgroundColor?'active':'']">
                        <span class="rx-center-name" :style="{color:obj.color,backgroundColor:obj.backgroundColor}" :title="name">{{name}}</span>
                    </li>
                </ul>
                <a-form-model v-else>
                    <a-form-model-item :label="i18n('bgcolor','字体颜色')">
                        <a-input class="be_colour" type="color" v-model="colorConfig.fgcolor" />
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('fgcolor','背景颜色')">
                        <a-input class="be_colour" type="color" v-model="colorConfig.bgcolor" />
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('preview','效果预览')">
                        <div class="rx-effect"><span class="rx-effect-span" :style="{color:colorConfig.fgcolor,backgroundColor:colorConfig.bgcolor}">{{name}}</span></div>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </div>
    </rx-dialog>
</template>

<script>
import {RxDialog, Util} from "@lowcode/jpaas-common-lib";
export default {
    name: "SysDicColorConfig",
    components: {RxDialog},
    props:{
        layerid: String,
        destroy:{},
        name:String,
        config:{
            type:Object,
            default:{}
        }
    },
    data(){
        return {
            colorConfig:{
                type:"presets",
                bgcolor:'#ffffff',
                fgcolor:"#46494d"
            },
            //系统颜色列表
            colorList:[
                {
                    backgroundColor:'#e8f7ff',
                    color:'#2387fa',
                },{
                    backgroundColor:'#e8f3ff',
                    color:'#2a78fa',
                },{
                    backgroundColor:'#eaedff',
                    color:'#2a48ff',
                },{
                    backgroundColor:'#ffece8',
                    color:'#f42928',
                },{
                    backgroundColor:'#fff3e8',
                    color:'#f55a12',
                },{
                    backgroundColor:'#fff7e8',
                    color:'#ff7a22',
                },{
                    backgroundColor:'#fffce8',
                    color:'#f5a700',
                },{
                    backgroundColor:'#e8ffea',
                    color:'#00a200',
                },{
                    backgroundColor:'#e8fffb',
                    color:'#00bdbf',
                },{
                    backgroundColor:'#f1ffe4',
                    color:'#95d708',
                },{
                    backgroundColor:'#e7fff7',
                    color:'#00d791',
                },{
                    backgroundColor:'#f5e8ff',
                    color:'#7816ff',
                },{
                    backgroundColor:'#ffe8fb',
                    color:'#d300d4',
                },{
                    backgroundColor:'#ffe8f1',
                    color:'#f30e8d',
                },{
                    backgroundColor:'#f2f3f5',
                    color:'#6d7887',
                },{
                    backgroundColor:'#1890ff',
                    color:'#ffffff',
                },{
                    backgroundColor:'#4285f4',
                    color:'#ffffff',
                },{
                    backgroundColor:'#2a48ff',
                    color:'#ffffff',
                },{
                    backgroundColor:'#f53f3f',
                    color:'#ffffff',
                },{
                    backgroundColor:'#ff5722',
                    color:'#ffffff',
                },{
                    backgroundColor:'#ff7d00',
                    color:'#ffffff',
                },{
                    backgroundColor:'#ffb400',
                    color:'#ffffff',
                },{
                    backgroundColor:'#00b42a',
                    color:'#ffffff',
                },{
                    backgroundColor:'#0fc6c2',
                    color:'#ffffff',
                },{
                    backgroundColor:'#7bc616',
                    color:'#ffffff',
                },{
                    backgroundColor:'#01de96',
                    color:'#ffffff',
                },{
                    backgroundColor:'#7816ff',
                    color:'#ffffff',
                },{
                    backgroundColor:'#b71de8',
                    color:'#ffffff',
                },{
                    backgroundColor:'#eb0aa4',
                    color:'#ffffff',
                },{
                    backgroundColor:'#86909c',
                    color:'#ffffff',
                }
            ]
        }
    },
    created() {
        if(this.config && this.config!={}){
            this.colorConfig=this.config
        }

    },
    mounted(){

    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "sysDic.colorConfig", key);
        },
        onOk(e){
            Util.closeWindow(this, "ok",this.colorConfig);
        },
        cancel(){
            Util.closeWindow(this,"cancel");
        },
        colorEvent(obj){
            this.colorConfig.bgcolor = obj.backgroundColor;
            this.colorConfig.fgcolor = obj.color;
        }
    }
}
</script>

<style scoped>
.rx-center-li.active{
    border-color: #1890ff;
}
.rx-center-li.active{
    position: relative;
    z-index: 1;
}
.rx-center-li.active:before{
    content: '';
    border-top: 10px solid #2e86ff;
    border-right: 10px  solid #2e86ff;
    border-left:10px  solid transparent;
    border-bottom: 10px  solid transparent;
    top: 0px;
    right: 0px;
    position: absolute;
    z-index: 2;
}
.rx-center-li.active:after{
    content: '';
    display: inline-block;
    width: 8px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 3;
    transform: rotate(-45deg);
}
.rx-top-name{
    line-height: 35px;
    color: #000000;
    opacity: 0.85;
    font-size: 14px;
}
.rx-center{
    width: 100%;
    border: dashed 1px #dadde0;
    margin-top: 15px;
}
.rx-center-ul{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px;
    margin: 0px;
}
.rx-center-li{
    width: 78px;
    height: 32px;
    border-radius: 4px;
    margin:5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    cursor: pointer;
    position: relative;
}
.rx-center-li:hover{
    border: solid 1px #1890ff;
}
.active{
    border: solid 1px #1890ff;
}
.rx-center-name{
    width: 68px;
    height: 22px;
    background-color: #e8f7ff;
    border-radius: 4px;
    text-align: center;
    line-height: 22px;
    color: #2387fa;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
}
.be_colour{
    width: 80px;
}
.rx-effect{
    width: 80px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: solid 1px #dadde0;
}
.rx-effect-span{
    width: 68px;
    height: 22px;
    background-color: #e8f7ff;
    border-radius: 4px;
    text-align: center;
    line-height: 22px;
    color: #2387fa;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
}
</style>